<script setup lang='ts'>
import { computed } from "vue";
import { loginHooks, IUserManage } from "./../hooks/loginHooks";
const _loginHooks: IUserManage = loginHooks();
import { Menu, Setting } from "@element-plus/icons-vue"; //icon图标
import NowTime from "../views/NowTimeView.vue"; //引入组件定时器
import mainStore from "../store/loginStore";
const store = mainStore(); //执行mainStore这个函数得到store

// const admin_token = ref(store.token);//获取store内的tokenƒ
_loginHooks.getHomeHeadPortrait(store.token);//传token
const head = computed(()=>store.head)//获取store内的head

//退出方法
const handleLogout = (): void => {
  // 调用退出接口或清空本地存储等操作
  store.removeToken(); //删除token
  sessionStorage.removeItem("token");
  window.location.href = window.location.origin + window.location.pathname;
};
</script>
<!-- 模型 -->

<template>
  <div class="content1">
    <el-container style="height: 700px; border: 1px solid #eee">
      <!-- 左侧 -->

      <el-aside
        style="background-color: rgb(37, 83, 89); height: 100vh"
        class="aside"
        width="220px"
      >
        <div style="margin-top: 20px">
          <img
            :src="head.imageUrl"
            alt=""
            style="
              width: 100px;
              height: 100px;
              /* border-radius: 50%; */
            "
          />
          <p class="welocme" style="color: white; line-height: 50px">
            欢迎~管理员~<span class="user">{{ head.username }}</span>
          </p>
          <p
            class="timer"
            style="color: white; line-height: 20px; margin-bottom: 20px"
          >
            <!-- 引入组件定时器 -->
            <now-time></now-time>
          </p>
        </div>
        <!-- 导航栏处 -->
        <!-- <el-menu class="el-menu-vertical-demo"
           background-color="rgb(37,83,89)" text-color="#fff"
           active-text-color="#ffd04b" :unique-opened="true">
				        
						  <el-sub-menu v-for="itemTitle in menusList" :index="itemTitle.path" :key="itemTitle.path">
						    <template #title>
						      <el-icon><Menu /></el-icon>{{ itemTitle.title }}
						    </template>
						    <el-menu-item-group v-for="item in itemTitle.children" :index="item.path" :key="item.path">
						      <template #title><el-icon><Menu /></el-icon>{{ item.title }}</template>
						    </el-menu-item-group>
						  </el-sub-menu>
				        </el-menu> -->
        <el-menu
          class="el-menu-vertical-demo"
          background-color="rgb(37,83,89)"
          text-color="#fff"
          active-text-color="#ffd04b"
          :unique-opened="true"
          :router="true"
        >
        <el-sub-menu index="1">
            <template #title>
              <el-icon> <Menu /> </el-icon>系统首页
            </template>
            <el-menu-item-group>
              <el-menu-item index="homepage">
                <el-icon><Menu /></el-icon>经营概况
              </el-menu-item>
              <el-menu-item index="zhanghuzl">
                <el-icon><Menu /></el-icon>账号资料
              </el-menu-item>
              <el-menu-item index="/AboutView">
                <el-icon><Menu /></el-icon>预约记录
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon> <Menu /> </el-icon>用户管理
            </template>
            <el-menu-item-group>
              <el-menu-item index="/MembershipList">
                <el-icon><Menu /></el-icon>会员列表
              </el-menu-item>
              <el-menu-item index="/GradeOfMembership">
                <el-icon><Menu /></el-icon>会员等级
              </el-menu-item>
              <el-menu-item index="/membershipCard">
                <el-icon><Menu /></el-icon>会员卡
              </el-menu-item>
              <el-menu-item index="/CoachList">
                <el-icon><Menu /></el-icon>教练列表
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="3">
           <template #title>
              <el-icon> <Menu /> </el-icon>商城管理
            </template>
            <el-menu-item-group>
              <el-menu-item index="/storeManage">
                <el-icon><Menu /></el-icon>商品列表
              </el-menu-item>
              <el-menu-item index="/shopCategory">
                <el-icon><Menu /></el-icon>商品分类
              </el-menu-item>
              <el-menu-item index="/shopOrder">
                <el-icon><Menu /></el-icon>商品订单
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <el-icon> <Menu /> </el-icon>课程管理
            </template>
            <el-menu-item-group>
              <el-menu-item index="/GroupScheduleView">
                <el-icon><Menu /></el-icon>团课管理
              </el-menu-item>
              <el-menu-item index="/PrivateEducationView">
                <el-icon><Menu /></el-icon>私教管理
              </el-menu-item>
              <el-menu-item index="/EvaluationView">
                <el-icon><Menu /></el-icon>评价管理
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="5">
            <template #title>
              <el-icon> <Menu /> </el-icon>场馆管理
            </template>
            <el-menu-item-group>
              <el-menu-item index="/changguan">
                <el-icon><Menu /></el-icon>场馆列表
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="6">
            <template #title>
              <el-icon><Menu /></el-icon>系统管理
            </template>
            <el-menu-item-group title="">
              <el-menu-item index="/home/member">
                <el-icon><Menu /></el-icon>成员管理
              </el-menu-item>
              <el-menu-item index="/home/role">
                <el-icon><Menu /></el-icon>角色管理
              </el-menu-item>
              <el-menu-item index="/home/advertising">
                <el-icon><Menu /></el-icon>广告管理
              </el-menu-item>
              <el-menu-item index="/home/notice">
                <el-icon><Menu /></el-icon>公告管理
              </el-menu-item>
              <el-menu-item index="/home/setting">
                <el-icon><Menu /></el-icon>系统配置
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <!-- 内容 -->
      <el-container>
        <el-header>
          <div>
            <span id="shuXian" style="margin-right: 10px"> </span>
            <span class="text"> <!-- {{ $route.params.id }} -->头部名称 </span>
          </div>
          <el-dropdown>
            <el-icon size="20px">
              <setting />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleLogout()"
                  >退出</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>

        <el-main>
          <div class="content">
            <!-- 跳转处 -->
            <router-view />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<style scoped>
.user{
  font-size: 25px;
  font-weight: 800;
}
>>> .el-menu {
  background-color: #315258;
}

.el-aside::-webkit-scrollbar {
  display: none;
}

.el-header,
.el-footer {
  background: linear-gradient(
    135deg,
    rgba(51, 103, 116, 0.6),
    rgba(53, 178, 198, 0.6)
  );
  color: #333;
  text-align: left;
  height: 60px;
  line-height: 60px;
  border-radius: 0px 15px 0 0;
  /* height: 60px; */
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  /*  line-height: 200px; */
  border-radius: 15px 0px 0 0;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  /* line-height: 160px; */
  text-align: left;
  /* line-height: 160px; */
  padding: 25px;
}

:deep(.el-container) {
  height: 100vh;
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

a {
  text-decoration: none;
  color: white;
}

#shuXian {
  display: inline-block;
  width: 5px;
  height: 30px;
  background-color: #1e9fff;
  margin-top: 15px;
  /* padding-top: 15px; */
}

.text {
  display: inline-block;
  margin-top: 0px;
  vertical-align: middle;
}

.content {
  width: 99%;
  /* height: 2000px; */
  background-color: white;
  margin: 0 auto;
  border-radius: 10px 10px 0 0;
  padding: 30px;
  box-sizing: border-box;
}

>>> .el-sub-menu__title {
  color: #fff;
}

>>> .el-sub-menu {
}

>>> .el-sub-menu__title:hover {
  background-color: #5a9cf8;
}

>>> .el-menu-item-group__title:hover {
  background-color: #5a9cf8;
}

>>> .el-menu-item-group__title {
  color: #fff;
  padding: 0;
}

>>> .el-menu-item-group div {
  /* height: 40px;
  line-height: 40px; */
}

>>> .el-menu-item-group {
  text-align: left;
}

.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-header div {
  display: flex;
}
</style>
